<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <a-menu mode="horizontal" :selectedKeys="selectedKeys" type="inner">
        <a-menu-item key="/platformManagement/company/msgSettings/sys-info">
          <router-link :to="{ name: 'companySysInfo' }">
            {{ $t('menu.companySysInfo') }}
          </router-link>
        </a-menu-item>
        <a-menu-item key="/platformManagement/company/msgSettings/companyWx-config">
          <router-link :to="{ name: 'companyWxConfig' }">
            {{ $t('menu.companyWxConfig') }}
          </router-link>
        </a-menu-item>
        <a-menu-item key="/platformManagement/company/msgSettings/mail-config">
          <router-link :to="{ name: 'companyMailConfig' }">
            {{ $t('menu.companyMailConfig') }}
          </router-link>
        </a-menu-item>
      </a-menu>
      <route-view></route-view>
    </a-card>
  </div>
</template>

<script>
import { RouteView } from '@/layouts'
import { mixinDevice } from '@/utils/mixin'
export default {
  components: { RouteView },
  mixins: [mixinDevice],
  data () {
    return {
      // horizontal  inline
      mode: 'inline',

      selectedKeys: []
    }
  },
  created () {
    this.updateMenu()
  },
  watch: {
    $route (val) {
      this.updateMenu()
    }
  },
  methods: {
    updateMenu () {
      const routes = this.$route.matched.concat()
      this.selectedKeys = [routes[4].path]
    }
  }
}
</script>

<style lang="less" scoped></style>
